<template>
	<view class="">
		<view class="seach">
			<u-navbar :is-back="false" :border-bottom="false" :background="background">
				<view class="d-flex a-center">
					<view class="pl-2 py-2"  @click="backtrack_img">
						<u-icon name="arrow-left" color="#ffffff" size="40"></u-icon>
					</view>
					<view class="font-lg font-weight text-white mx-2">客户标签</view>
					<u-icon name="plus-circle" color="#ffffff" size="45" @click="add_tag"></u-icon>
				</view>	
			</u-navbar>
		</view>
		
		
		
		
		
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			
			<u-checkbox-group @change="checkboxGroupChange">
				<view class="boards_title mx-2 pt-3 font-md d-flex a-center">
					<View class="font-weight font-35">系统标签</View>
				</view>
				
				<view class="h_100">
					<view class="m-2 bg-white rounded-5">
						<view  :index="index" v-for="(item, index) in tallyxitong" :key="item.tag_id">
							<view class="item u-border-bottom a-center">
								
									<u-checkbox @change="checkboxXitongChange(index)" shape="circle"  active-color="#fe9f31"  v-model="item.checked" size="45" :name="item.tag_name">
										<view class="py-1 w-100">
											{{item.tag_name}}
										</view>
									</u-checkbox>
								
							</view>		
						</view>
					</view>
				</view>
				
				
				
				<view class="boards_title mx-2 pt-3 font-md d-flex a-center">
					<View class="font-weight font-35">新建标签</View>
				</view>
				
				<view class="h_100">
					<view class="m-2 bg-white rounded-5">
						<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in tally" :key="item.tag_id" @click="click" @open="open" :btn-width="btnWidth" :options="options">
							<view class="item u-border-bottom a-center">
								
									<u-checkbox @change="checkboxChange(index)" shape="circle"  active-color="#fe9f31"  v-model="item.checked" size="45" :name="item.tag_name">
										<view class="py-1 w-100">
											{{item.tag_name}}
										</view>
									</u-checkbox>
								
							</view>		
						</u-swipe-action>
					</view>
				</view>
			</u-checkbox-group>
		</scroll-view>
		
		<!-- 新建标签 -->
		<u-popup v-model="tag_add" width="90%" mode="center" border-radius="14">
				<view class="mx-3 py-5">
					<view class="font-32 text-000 font-weight text-center ">新建标签</view>
					<view class="border p-2 add_input my-3">
						<input type="text" v-model="tag_name" @input="tag_input" placeholder="请输入标签名称(1-8)字符" maxlength="8" />
					</view>
					<view class="d-flex j-sb">
						<view class="font-35 cancel" @click="cancel_add">取消</view>
						<view class="font-35 confirm" @click="confirm_add">确认</view>
					</view>
				</view>
		</u-popup>
		<!-- 编辑标签 -->
		<u-popup v-model="tag_edit" width="90%" mode="center" border-radius="14">
				<view class="mx-3 py-5">
					<view class="font-32 text-000 font-weight text-center ">编辑标签</view>
					<view class="border p-2 add_input my-3">
						<input type="text" v-model="edit_name" @input="edit_input" placeholder="请输入标签名称(1-8)字符" maxlength="8" />
					</view>
					<view class="d-flex j-sb">
						<view class="font-35 cancel" @click="cancel_edit">取消</view>
						<view class="font-35 confirm" @click="confirm_edit">确认</view>
					</view>
				</view>
		</u-popup>
		<!-- 删除标签 -->
		<u-popup v-model="tag_delete" width="90%" mode="center" border-radius="14">
				<view class="mx-3 py-5">
					<view class="font-32 text-000 font-weight text-center ">确认要删除此标签吗?</view>
					<view class="d-flex j-sb mt-3">
						<view class="font-35 cancel" @click="cancel_delete">取消</view>
						<view class="font-35 confirm" @click="confirm_delete">确认</view>
					</view>
				</view>
		</u-popup>
		<view class="footer"></view>
		<view class="position-fixed p-2 sub bottom-0 w-100 bg-white py-2">
			<button type="warn" class="rele" @click="sub_next">保存</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				background: {
					background: '#fa7226',
				},
				tally:"", // 客户标签
				tallyxitong: "", // 系统标签
				scrollHeight:0, // 屏幕高度
				btnWidth: 130,
				show: false,
				options: [
					{
						text: '编辑',
						style: {
							backgroundColor: '#fe9f31'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#fd3b32'
						}
					}
				],
				// selected_show:false, // 已选开关
				
				swipe_index:0, // 侧滑标识
				
				tag_add:false,// 新建标签
				tag_name:"",
				
				tag_edit:false,// 编辑标签
				edit_name:"",
				tag_delete:false, // 删除标签
				
				user_id:0, // 客户id
				tag_item:"",
				users:"", // 店铺会员
			}
		},
		onReady() {
			let _this=this;
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					query.select('.footer').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].top - res[1].bottom + 'px';
					})
				}
			})
		},
		methods:{
			// 返回
			backtrack_img(){
				uni.navigateBack({
					delta:1
				})
			},
			// 新建标签
			add_tag(){
				this.tag_add=true
			},
			tag_input(e){
				this.tag_name=e.detail.value
			},
			// 新建取消
			cancel_add(){
				this.tag_add=false
			},
			// 新建确认
			confirm_add(){
				this.$H.post("v2/store/user/tag/add",{
					tag_name:this.tag_name
				}).then(res=>{
					console.log(res)
					if(res.data){
						this.tag_add=false
						this.$H.post("v2/store/user/tag",{
						}).then(res=>{
							this.tally=res.reduce((acc,item)=>{
								acc.push({
									...item,
									show:false,
									checked: false
								})
								return acc
							},[])
						})
						this.tag_name=""
						this.$nextTick(function(){
							this.$H.post("v2/store/region/users").then(res=>{
								let users=res.data.reduce((acc,item)=>{
									item.tag_list.forEach(v=>{
										if(this.user_id==item.user_id){
											acc.push({
												...v,
												show:false,
												checked: false
											})
										}
									})
									return acc
								},[])
								this.tally.push(...users)
							})
						})
						this.$u.toast("新建标签成功")
						
					}else{
						this.$u.toast(res.status.error_desc)
					}
				})
			},
			// 编辑信息
			edit_input(e){
				this.edit_name=e.detail.value
			},
			// 编辑取消
			cancel_edit(){
				this.tag_edit=false
			},
			// 编辑确认
			confirm_edit(){
				this.$H.post("v2/store/user/tag/update",{
					tag_id:this.tag_item[0].tag_id,
					tag_name:this.edit_name
				}).then(res=>{
					console.log(res)
					if(res.data){
						this.tag_edit=false
						// this.$H.post("v2/store/user/tag",{
						// }).then(res=>{
						// 	this.tally=res.reduce((acc,item)=>{
						// 		acc.push({
						// 			...item,
						// 			show:false,
						// 			checked: false
						// 		})
						// 		return acc
						// 	},[])
						// 	this.tally.push(...this.users)
						// })
						this.tally[this.swipe_index].tag_name=this.edit_name
						this.$u.toast("编辑成功")
					}else{
						this.$u.toast(res.status.error_desc)
					}
				})
			},
			
			// 删除取消
			cancel_delete(){
				this.tag_delete=false
			},
			// 删除确认
			confirm_delete(){
				this.$H.post('v2/store/user/tag/delete',{
					tag_id:this.tag_item[0].tag_id,
				}).then(res=>{
					if(res.data){
						// this.$H.post("v2/store/user/tag",{
						// }).then(res=>{
						// 	this.tally=res.reduce((acc,item)=>{
						// 		acc.push({
						// 			...item,
						// 			show:false,
						// 			checked: false
						// 		})
						// 		return acc
						// 	},[])
						// 	this.tally.push(...this.users)
						// })
						this.tally.splice(this.swipe_index,1)
						this.$u.toast(`删除成功`);
						this.tag_delete=false
					}else{
						this.$u.toast(res.status.error_desc)
					}
				})
			},
			
			click(index, index1) {
				this.swipe_index=index
				this.tag_item=this.tally.filter((v,i)=>{
					if(index==i){
						return v
					}
				})
				if(index1 == 1) {
					this.tag_delete=true
				} else {
					this.tag_edit=true
					this.tally[index].show = false;
					this.edit_name=this.tally[index].tag_name
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.tally[index].show = true;
				this.tally.map((val, idx) => {
					if(index != idx) this.tally[idx].show = false;
				})
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e){
			},
			// 选中某个复选框时，由checkbox时触发
			
			checkboxXitongChange(index){
				let num=0;
				
				console.log("fdsafdsafds", tallyxitong)
				
				this.$nextTick(function(){
					this.tallyxitong.filter(v=>{
						if(v.checked){
							num++
						}
					})
					
					if(num>3){
						this.$u.toast('最多只能选择3个标签')
						this.tallyxitong[index].checked=false
						console.log(num,this.tallyxitong[index].checked)
					}else if(num==0){
						this.selected_show=false
					}else if(num==3){
						num=0
					}else{
						this.selected_show=true
					}
				})
			},
			
			checkboxChange(index){
				let num=0;
				console.log("fdsafdsafds", tallyxitong)
				this.$nextTick(function(){
					this.tally.filter(v=>{
						if(v.checked){
							num++
						}
					})
					if(num>3){
						this.$u.toast('最多只能选择3个标签')
						this.tally[index].checked=false
						console.log(num,this.tally[index].checked)
					}else if(num==0){
						this.selected_show=false
					}else if(num==3){
						num=0
					}else{
						this.selected_show=true
					}
				})
			},
			// 已选
			close(item,index){
				this.tally[index].checked=false
				this.$nextTick(function(){
					let flag=this.tally.every(v=>{
						return v.checked==false
					})
					if(flag){
						this.selected_show=false
					}
				})
			},
			// 保存
			sub_next(){
				let tally=this.tally.filter(v=>{
					if(v.checked){
						return v
					}
				})
				
				console.log("fdsafdsafdsa", this.tallyxitong)
				
				let tallyxitong = this.tallyxitong.filter(v=>{
					if(v.checked){
						return v
					}
				})
				
				tally = tally.concat(tallyxitong);
				
				console.log(tally)
				
				getApp().globalData.tally_item=tally
				uni.navigateBack({
					delta:1
				})
			}
		},
		onLoad(e) {
			this.user_id=e.user_id
			
			this.$H.post("v2/store/user/tagxitong",{
			}).then(res=>{
				this.tallyxitong=res.reduce((acc,item)=>{
					acc.push({
						...item,
						show:false,
						checked: false
					})
					return acc
				},[])
				let terrace_item=JSON.parse(uni.getStorageSync("terrace_item"))
				console.log(terrace_item)
				if(terrace_item.tag_list){
					this.tallyxitong.filter(v=>{
						terrace_item.tag_list.filter(i=>{
							if(v.tag_id==i.tag_id){
								return v.checked=true
							}
						})
					})
				}else{
					this.tallyxitong.filter(v=>{
						terrace_item.filter(i=>{
							if(v.tag_id==i.tag_id){
								return v.checked=true
							}
						})
					})
				}
			})
			
			
			
			this.$H.post("v2/store/user/tag",{
			}).then(res=>{
				this.tally=res.reduce((acc,item)=>{
					acc.push({
						...item,
						show:false,
						checked: false
					})
					return acc
				},[])
				let terrace_item=JSON.parse(uni.getStorageSync("terrace_item"))
				console.log(terrace_item)
				if(terrace_item.tag_list){
					this.tally.filter(v=>{
						terrace_item.tag_list.filter(i=>{
							if(v.tag_id==i.tag_id){
								return v.checked=true
							}
						})
					})
				}else{
					this.tally.filter(v=>{
						terrace_item.filter(i=>{
							if(v.tag_id==i.tag_id){
								return v.checked=true
							}
						})
					})
				}
			})
		}
	}
</script>

<style>
	.sub /deep/ .rele{
		font-size: 30upx;
		padding: 5upx 0;
		background: linear-gradient(to right,#f47814,#f47814);
	}
	
	.item {
		display: flex;
		padding: 20rpx;
	}
	
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		padding: 10rpx 0;
	}
	.add_input{
		background-color: #f5f6f6;
		border: 1px solid #EAEAEA;
		border-radius: 10upx;
	}
	.cancel{
		width: 48%;
		height: 85upx;
		line-height: 85upx;
		background-color: #FFFFFF;
		color: #fe9f31;
		text-align: center;
		border: 1px solid #EAEAEA;
		border-radius: 10upx;
	}
	.confirm{
		width: 48%;
		height: 85upx;
		line-height: 85upx;
		background-color: #fe9f31;
		color: #FFFFFF;
		text-align: center;
		border-radius: 10upx;
	}
	.sele{
		background-color: #fdf2de;
		border: 1px solid #ff9f31;
		border-radius: 10upx;
	}
	u-checkbox{
		width: 100%!important;
	}
	.u-checkbox{
		width: 100%!important;
	}
	.u-checkbox__label{
		width: 100%!important;
	}
	
	u-checkbox-group{
		width: 100%!important;
	}
	.u-checkbox-group{
		width: 100%!important;
	}
</style>
